<template>
  <div class="ai-assistant">
    <div class="header">
      <h2>AI 助手</h2>
      <div class="header-right">
        <button class="clear" @click="clearChat" :disabled="messages.length === 0">清空会话</button>
      </div>
    </div>

    <div class="chat" ref="chatRef">
      <div v-for="(m, i) in messages" :key="i" :class="['msg', m.role]">
        <div class="avatar">{{ m.role === 'user' ? '我' : 'AI' }}</div>
        <div class="bubble">{{ m.content }}</div>
      </div>
      <div v-if="loading" class="msg ai loading">
        <div class="avatar">AI</div>
        <div class="bubble">正在思考...</div>
      </div>
    </div>

    <form class="composer" @submit.prevent="handleSend">
      <input
        v-model.trim="draft"
        type="text"
        placeholder="请输入问题，回车发送"
        @keydown.enter.exact.prevent="handleSend"
      />
      <button class="send" type="submit" :disabled="!draft || loading">发送</button>
    </form>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue'

const messages = ref([
  { role: 'ai', content: '你好，我是内置 AI 助手，可以回答常见问题并生成文案。' },
])
const draft = ref('')
const loading = ref(false)
const chatRef = ref(null)

function scrollToBottom() {
  nextTick(() => {
    const el = chatRef.value
    if (el) el.scrollTop = el.scrollHeight
  })
}

function mockReply(text) {
  // 简单的前端内置规则，后续可替换为后端大模型接口
  if (!text) return '我没听清，能再描述详细一点吗？'
  const lower = text.toLowerCase()
  if (lower.includes('bom')) return 'BOM（物料清单）用于描述产品结构与组成，支持多级展开与版本管理。'
  if (lower.includes('入库') || lower.includes('出库')) return '仓储模块提供入库、出库、盘点、调拨等功能，可在仓库管理中查看明细。'
  if (lower.includes('帮助') || lower.includes('help')) return '你可以询问：如何新建采购单？如何导出报表？如何添加产品？'
  return `你刚才说：“${text}”。我已记录，稍后为你整理要点。`
}

function handleSend() {
  if (!draft.value || loading.value) return
  const text = draft.value
  messages.value.push({ role: 'user', content: text })
  draft.value = ''
  loading.value = true
  scrollToBottom()

  setTimeout(() => {
    messages.value.push({ role: 'ai', content: mockReply(text) })
    loading.value = false
    scrollToBottom()
  }, 600)
}

function clearChat() {
  messages.value = []
}
</script>

<style scoped>
.ai-assistant {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 40px);
  background: #f5f7fa;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #ffffff;
  border-bottom: 1px solid #ebeef5;
}

.header h2 {
  margin: 0;
  font-size: 18px;
}

.header-right .clear {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.chat {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.msg {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.msg .avatar {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: #409eff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.msg.user .avatar {
  background: #67c23a;
}

.bubble {
  max-width: 70%;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.msg.user .bubble {
  background: #ecf5ff;
  border-color: #c6e2ff;
}

.composer {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: #ffffff;
  border-top: 1px solid #ebeef5;
}

.composer input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  outline: none;
}

.composer .send {
  padding: 0 16px;
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.composer .send:disabled {
  background: #a0cfff;
  cursor: not-allowed;
}
</style>


